In JQuery callback function will execute when animation effect has finished. Assume that if animation effect applies on image and effect is not finished and execution is reached on next line then in this situation code will generate error, if we want to prevent such type of errors in code then we can use callback method. This method will executed when animation effect has been completed.
Code:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("img").hide(1000, function() //image will hide after animation effect then message will show(callback)
{
alert("Image has hide");
});
});
});
</script>
</head>
<body>
<h2>
JQuery callback method</h2>
<img src="Lighthouse.jpg" id="img" style="height: 300px; width: 400px; position: relative" /> <br />
<br />
<button>
Click to hide</button>
</body>
</html>
If I will click on button,image will start disappear from page as shown below :
If image has disappeared from page, popup window will show message on page as shown below:
Anonymous User
15-Apr-2019Thank You for the informative post.